<template>
  <div class="banner">
    <div class="swiper" ref="banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in banner" :key="index">
          <img :src="item" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper/swiper-bundle.esm.js";
import "swiper/swiper.min.css";
// import { mapState } from "vuex";
export default {
  name: "banner",
  data() {
    return {
      banner:["https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u278.png",
      "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u277.png",
      "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u276.jpg"
      ]

    };
  },
//   computed: {
//     ...mapState("goodsDetail", { data: "banner" }),
//   },
  mounted() {
    new Swiper(this.$refs.banner, {
      loop: true,
      autoplay: {
        disableOnInteraction: false,
        delay: 5000,
      },
      observer: true,
      observeParents: true,

      on: {
        slideChangeTransitionEnd: (swiper) => {
          this.index = swiper.realIndex + 1;
        },
      },
    });
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
    @return ($px / 750) * 100vw;

}
.banner {
  position: relative;

}
.swiper-slide {
    width: 100%;
    height: vw(360);
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
</style>
